<template>
  <div
    :class="{ fullscreen: fullscreen }"
    class="tinymce-container"
    :style="{ width: containerWidth }"
  >
    <textarea :id="tinymceId" class="tinymce-textarea" />
  </div>
  <el-dialog v-model="dialogVisible" width="30%" :before-close="handleClose">
    <template #header>
      {{ $t("message.common.prompt") }}
    </template>
    <span> {{ $t("message.common.refreshPageL") }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ $t("message.common.cancel") }}</el-button
        >
        <el-button type="primary" @click="refreshPage">
          {{ $t("message.common.confirm") }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import plugins from "./plugins";
import toolbar from "./toolbar";
import load from "./dynamicLoadScript";

const tinymceCDN =
  "https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.5/tinymce.min.js";
import { useI18n } from "vue-i18n";
import { ElMessage, ElMessageBox } from "element-plus";
import { showErrorToast, showSuccessToast } from "@/utils/common";
import service from "@/utils/system/request";

export default {
  name: "Tinymce",
  props: {
    id: {
      type: String,
      default: function () {
        return (
          "vue-tinymce-" +
          +new Date() +
          ((Math.random() * 1000).toFixed(0) + "")
        );
      }
    },
    modelValue: {
      type: String,
      default: ""
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        return [];
      }
    },
    menubar: {
      type: String,
      default: "edit view format table"
    },
    height: {
      type: [Number, String],
      required: false,
      default: 500
    },
    width: {
      type: [Number, String],
      required: false,
      default: "auto"
    }
  },
  data() {
    return {
      hasInit: false,
      tinymceId: null,
      fullscreen: false,
      dialogVisible: false,
      locale: "",
      languageTypeList: {
        en: "en",
        "zh-cn": "zh_CN",
        es: "es_MX",
        ja: "ja"
      }
    };
  },
  computed: {
    containerWidth() {
      const width = this.width;
      if (/^[\d]+(\.[\d]+)?$/.test(width)) {
        // matches `100`, `'100'`
        return `${width}px`;
      }
      return width;
    }
  },
  watch: {
    modelValue(val) {
      if (this.hasInit && this.getContent() !== val) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val || "")
        );
      }
    },
    "$i18n.locale"(newValue, oldValue) {
      this.$nextTick(() => {
        this.dialogVisible = true;
        console.log(
          "language switch from " + oldValue + " to " + newValue + ""
        );
      });
    }
  },
  created() {
    this.tinymceId = this.id;
  },
  mounted() {
    this.init();
    const { locale } = useI18n();
    this.locale = locale;
  },
  activated() {
    if (window.tinymce) {
      this.initTinymce();
    }
  },
  deactivated() {
    this.destroyTinymce();
  },
  unmounted() {
    this.destroyTinymce();
  },
  methods: {
    refreshPage() {
      window.location.reload();
    },
    handleClose(done) {
      // done()
      // console.log('点击空白')
    },
    init() {
      // dynamic load tinymce from cdn
      load(tinymceCDN, err => {
        if (err) {
          console.log(err.message);
          return;
        }
        this.initTinymce();
      });
    },
    uploadFile(formData) {
      // 上传图片接口，【可更换】
      console.log(formData);
      return new Promise((resolve, reject) => {
        service.post(`admin/upload/image`, formData).then(({ code, data }) => {
          // closeLoading();
          if (code === 0) {
            showSuccessToast("上传成功");
            resolve(data);
          } else {
            showErrorToast("上传出现了点问题");
            reject();
          }
        });
      });
    },
    initTinymce() {
      const _this = this;
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        language: this.languageTypeList[this.locale],
        height: this.height,
        body_class: "panel-body ",
        object_resizing: true,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: this.menubar,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: "propmt",
        powerpaste_html_import: "propmt",
        powerpaste_allow_local_images: true,
        paste_data_images: true,
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: "square",
        advlist_number_styles: "default",
        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
        default_link_target: "_blank",
        link_title: false,
        content_style: "img {max-width:100%;height:auto;display:block;}",
        // content_style: 'p {margin-block-start: 0; margin-block-end: 0; color: #606D81; font-size: 14px;}; table { border: 1px}', // 直接自定义可编辑区域的css样式
        images_resize: true,
        images_resize_max_width: 500, // 设置图片最大宽度为500px
        images_resize_max_height: 300, // 设置图片最大高度为300px
        fontsize_formats: "11pt 12pt 12pt 14pt 18pt 24pt 36pt 72pt",
        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
        init_instance_callback: editor => {
          if (_this.modelValue) {
            editor.setContent(_this.modelValue);
          }
          _this.hasInit = true;
          editor.on("NodeChange Change KeyUp SetContent", () => {
            this.$emit("update:modelValue", editor.getContent());
          });
        },
        paste_preprocess: (plugin, args) => {
          // 处理远程图片
          let imageArray = [];
          args.content.replace(
            /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
            (match, capture) => {
              //判断是否需要本地化
              if (capture.indexOf("//") === 0)
                imageArray.push("http:" + capture);
              else imageArray.push(capture);
            }
          );
          if (imageArray.length > 0) this.uploadRemoteFile(imageArray, 0);
        },
        images_upload_handler: async (blobInfo, success, failure) => {
          try {
            let formData = new FormData();
            formData.append("fileData", blobInfo.blob());
            this.uploadFile(formData).then(res => {
              console.log(res);
              success(res);
            });
            // let url = `${config.downloadUrl}${res.url}`;
            // let url = `${res.url}`;
            // success(url);
          } catch (err) {
            console.log(err);
          }
          // // 处理本地图片
          // // 在回调中，记得调用success函数，传入上传好的图片地址；
          // // blobInfo.blob() 得到图片的file对象；
          // let files = blobInfo.blob();
          // if (!files.name) {
          //   files = new window.File([files], "image.png");
          // }
          // let formData = new FormData();
          // formData.append("file", files);
          // uploadImage(formData).then(res => {
          //   success(process.env.VUE_APP_Image + "/" + res.data);
          // });
        },
        setup: editor => {
          //   editor.addButton('customButton', {
          //     text: '自定义按钮',
          //     icon: 'custom-icon',
          //     onclick: function () {
          //       // 调用自定义类中的方法
          //       // customClass.customMethod();
          //     }
          //   });
          editor.on("SubmitDialog", () => {
            // 当用户确认弹框时，可以在这里处理确认事件
            console.log("用户确认");
            debugger;
          });
          editor.on("FullscreenStateChanged", e => {
            debugger;
            _this.fullscreen = e.state;
          });
        },
        convert_urls: false
      });
    },
    destroyTinymce() {
      const tinymce = window.tinymce.get(this.tinymceId);
      if (this.fullscreen) {
        tinymce.execCommand("mceFullScreen");
      }
      if (tinymce) {
        tinymce.destroy();
      }
    },
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      return window.tinymce.get(this.tinymceId).getContent();
    },
    // 图片上传时使用
    imageSuccessCBK(str) {
      window.tinymce
        .get(this.tinymceId)
        .insertContent(`<img src="${process.env.VUE_APP_Image}/${str}" >`);
    },
    // 上传远程图片
    uploadRemoteFile(imageArray, n) {
      // if (n < imageArray.length) {
      // 	// 判断图片url是本地图片还是外部图片
      // 	if(imageArray[n].indexOf('blob:')== 0) {
      // 		// 本地图片查看images_upload_handler函数，当前函数不做处理
      // 	}
      // 	else {
      // 		let params = {
      // 			imgUrl: imageArray[n]
      // 		}
      // 		uploadRemoteImage(params)
      // 		.then(res => {
      // 			let html = window.tinymce.get(this.tinymceId).getContent()
      // 			html = html.replace(imageArray[n], `${process.env.VUE_APP_Image}/${res.data}`)
      // 			window.tinymce.get(this.tinymceId).setContent(html)
      // 			this.uploadRemoteFile(imageArray, ++n)
      // 		})
      // 	}
      // }else {
      // 	//this.loading = false
      // 	this.$emit('input', tinymce.activeEditor.getContent())
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.tinymce-container {
  position: relative;
  line-height: normal;
  //background: pink;
}

.tinymce-container {
  :deep(.mce-fullscreen) {
    z-index: 10000;
  }
}

.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}

.editor-custom-btn-container {
  position: absolute;
  right: 6px;
  top: 8px;
  /*z-index: 2005;*/
}

.fullscreen .editor-custom-btn-container {
  z-index: 10000;
  position: fixed;
}

.editor-upload-btn {
  display: inline-block;
}

:deep(.mce-tinymce) {
  //border: 1px solid #f0f2f5;
}
</style>

<style type="text/css">
.mce-branding {
  display: none !important;
}

.mce-wordcount {
  margin-right: 20px !important;
}

.mce-flow-layout {
  padding: 5px 0 !important;
}

.mce-stack-layout .mce-menu-item:nth-child(3) {
  display: none;
}
</style>
